<template>
    <section class="viewArea"> 
        <div class="containHead">域名管理</div>
        <section class="mainContainer">
            <div class="clearfix"> 
                <Button 
                    class="filter-item" 
                    type="primary" 
                    @click="handleAddCustomer"
                >
                    <Icon type="plus"></Icon>
                    添加域名
                </Button> 
            </div>   
            <Row style="padding-top: 20px">
                <Col span="24">
                    <Table size="small" width="100%" @on-selection-change="handleSelectionChange"  :columns="columns" :data="domainList.list" ellipsis></Table>
                </Col>
            </Row>
            <Row style="margin-top: 20px;">
                <Col span="24"> 
                    <Page placement="top" @on-change="skipPage" @on-page-size-change="skipPageSize" :total="domainList.list.length" :page-size="domainList.page_size" :current="page" show-elevator show-sizer show-total></Page>
                </Col>
            </Row>
        </section>   
        <CreateDomainModal 
            :title="create ? '添加域名' : '编辑域名'"
            :visible="dialogFormVisible"
            :data="modifyData"
            :isCreate="create"
            @closeModal="handleCloseModal"
            @save="handleSaveDomain"
        />
    </section>
</template>

<script>
import { mapGetters } from 'vuex'
import { SERVICE_OPTIONS, STATUS_OPTIONS } from '@/utils/opts'
import { cloneDeep } from '@/utils'
import CreateDomainModal from './CreateDomainModal' 
export default {
    name: "domain", 
    data() {
      return {
        dialogFormVisible : false,
        deleteVisible: false,
        create: true,
        customer_id: -1,
        modifyData: null, 
        page: 1,
        page_size: 20,  
        orderby: "id",
        order: "desc",
        columns: [
            {
                type: 'selection',
                width: 60,
                align: 'center'
            },
            {
                title: '客户名称',
                width: 128,
                sortable: true,
                sortType: "desc",  
                sortable: 'id',
                key: 'customer', 
                render(h, row){ 
                    return <span>{row.row.customer.customer_mark}</span>
                }   
            },
            {
                title: '域名', 
                key: 'domain' 
            },
            {
                title: '服务类型', 
                key: 'type',
                render(h, row){   
                    let service = '';
                    SERVICE_OPTIONS.forEach(item => {
                        if(row.row.type == item.value) service = item.label 
                    })
                    return <span>{
                        service
                    }</span>
                }   
            },
            {
                title: '域名状态', 
                key: 'status',
                render(h, row){ 
                    let status = '';
                    STATUS_OPTIONS.forEach(item => {
                        if(row.row.status == item.value) status = item.label 
                    })
                    return <span>{
                        status
                    }</span>
                }   
            },  
            {
                title: '操作', 
                key: 'contacts',
                render: (h, row) => { 
                    let _this = this
                    return h('div', [
                        h('i-button', {
                            props: {
                                type: 'text',
                            },
                            on: {
                                click() {
                                    //跳转机器绑定
                                    _this.$router.push({path:'/domainbind', query:{
                                        domain_id: row.row.id,
                                        domain_name: row.row.domain,
                                    }})
                                }
                            }
                        }, '绑定交换机'),
                        h('i-button', {
                            props: {
                                type: 'text',
                            },
                            on: {
                                click() {
                                    _this.handleModifyItem(row.row)
                                }
                            }
                        }, '编辑'),
                        h('i-button', {
                            props: {
                                type: 'text',
                            },
                            on: {
                                click(){
                                    _this.handleDeteleComfirm(row.row)
                                }
                            }
                        }, '删除'),
                    ]);
                }   
            }, 
        ]
      }
    },
    computed: {
        ...mapGetters(['domainList'])
    },
    components: {
        CreateDomainModal, 
    },
    created(){
        this.getList()
        this.$store.dispatch('fetchAllCustomerList'); 
    },
    methods: { 
        skipPage (page){
            if(!isNaN(page)){
                this.page = page;
                this.getList();
            }
        },
        skipPageSize (page_size){
            if(!isNaN(page_size)){
                this.page_size = page_size;    
                this.getList();   
            }
        },
        getList(){
            let condition = { 
                page: this.page,
                pagesize: this.page_size,  
                orderby: this.orderby,
                order: this.order,
            }
            this.$store.dispatch('fetchDomainList', condition) 
        },
        handleCloseModal(){
            this.dialogFormVisible = false
        },
        handleAddCustomer(){
            this.dialogFormVisible = true
            this.create = true
            this.modifyData = {
                customer_id: '',
                domain: '',
                status: '1',
                type: '1',
            }
        },
        handleModifyCustomer(row){
            this.dialogFormVisible = true
            this.create = false
            this.customer_id = row.customer_id
            this.modifyData = row
        },
        handleSelectionChange(val){
        },
        handleClick(row) {
        },
        //新增
        handleSaveDomain(params){ 
            let _this = this;
            if(_this.create){ //添加
                _this.$store.dispatch('createDomain', {
                    params,
                    cb(_data){  
                        if(_data.ok){
                            _this.$Message.success("保存成功") 
                            _this.dialogFormVisible = false
                            _this.getList();
                        }else{ 
                            _this.$Message.error("保存失败") 
                        }
                    }
                })  
            }else{
                params.id = _this.domain_id
                _this.$store.dispatch('modifyDomain', {
                    params,
                    cb(_data){  
                        if(_data.ok){
                            _this.$Message.success("修改成功") 
                            _this.dialogFormVisible = false
                            _this.getList();
                        }else{ 
                            _this.$Message.error("修改失败") 
                        }
                    }
                })    
            }
        },
        handleDeteleComfirm(item){
            let _this = this;
            this.deleteVisible = true;
            this.delete_id = item.customer_id;  
            this.$Modal.confirm({
                title: '删除客户',
                content: '确认删除该客户？',
                onOk: () => {
                    _this.handleDeleteDomain(item);
                }, 
            });
        },
        //删除
        handleDeleteDomain(data){
            let _this = this;
            let params = {
                domain_id: parseInt(data.id)
            }
            //this.delete_id 删除客户id
            _this.$store.dispatch('deleteDomain', {
                params,
                cb(_data){ 
                    if(_data.ok){
                        _this.$Message.success("删除成功")
                        _this.dialogFormVisible = false
                        _this.getList()
                    }else{ 
                        _this.$Message.error("删除失败")
                    }
                }
            })  
            
        },
        handleModifyItem(row){
            this.dialogFormVisible = true
            this.create = false
            this.domain_id = row.id
            this.modifyData = cloneDeep(row)
        },
    }
}
</script>